<template>
  <div align="center">
     <el-card>
       <div>
       <el-steps :active="active" finish-status="finish"  align-center style="margin-bottom: 40px;">
        <el-step title="选择商品分类"></el-step>
        <el-step title="填写商品信息"></el-step>
        <el-step title="填写商品属性"></el-step>
      </el-steps>
      <el-card shadow="hover" style="width:1000px">
      <el-row type="flex" class="row-bg">
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">
              <div>
              <!-- 商品类别的显示 -->
              <span style="font-size: 14px;">商品分类：&nbsp;</span>
              <el-tag type="success">
                <span>
                  <span>{{showTbSpuData.category1IdLabel}}</span>
                  <span> &nbsp;>{{showTbSpuData.category2IdLabel}}</span>
                  <span> &nbsp;>{{showTbSpuData.category3IdLabel}}</span>
                </span>&nbsp;
                </el-tag>
                <el-button icon = 'el-icon-edit' plain type="info" @click="previous" size="mini" circle></el-button>
              </div><br/>
              <!-- 表单数据 -->
              <el-form :model="goodsInfo" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="small">
                <el-form-item label="商品名称:" prop="name">
                  <el-input v-model="goodsInfo.name" @input="e => goodsInfo.name = validForbid (e)"></el-input>
                </el-form-item>
                <el-form-item label="副标题:">
                  <el-input v-model="goodsInfo.caption" @input="e => goodsInfo.caption = validForbid (e)"></el-input>
                </el-form-item>
                <el-form-item label="商品品牌:" required>
                    <el-select v-model="goodsInfo.brandId" placeholder="请选择商品品牌">
                      <el-option
                          v-for="item in brandData" :key="item.id" :label="item.name" :value="item.id"
                          ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品介绍:" prop="delivery">
                   <el-input type="textarea" v-model="goodsInfo.introduction" @input="e => goodsInfo.introduction = validForbid (e)" maxlength="60" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="运费模板:">
                   <el-select v-model="goodsInfo.freightId" placeholder="请选择运费模板">
                          <el-option
                          v-for="item in freightData" :key="item.id" :label="item.name" :value="item.id"
                          ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品货号:">
                  <!-- 文字提示 -->
                  <el-tooltip class="item" effect="dark" content="不输入商品货号，系统将自动生成一个唯一的货号。" placement="right">
                    <el-input v-model="goodsInfo.sn" type="number" @input="goodsInfo.sn=goodsInfo.sn.replace(/^(0+)|[^\d]+/g, '')" min="10000101"></el-input>
                  </el-tooltip>
                </el-form-item>
                <el-form-item label="服务保证:"  prop="saleService">
                    <el-checkbox-group v-model="goodsInfo.saleService">
                        <el-checkbox label="无忧退货" name="saleService"></el-checkbox>
                        <el-checkbox label="快速退款" name="saleService"></el-checkbox>
                        <el-checkbox label="免费包邮" name="saleService"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item>
                  <el-button  @click="previous" type="primary" size="small">上一步</el-button>
                  <el-button  @click="next" type="primary" size="small">下一步</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
      </el-row>
      </el-card>
       </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      goodsInfo: {
        saleService: []
      },
      active: 1,
      category3Ids: [], // 这是从add转码chuan过来的参数
      showTbSpuData: {}, // 这是处理后的结果,用于显示和shang'yi步的回显
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, max: 27, message: '长度在 3 到 27 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        saleService: [
          { type: 'array', required: true, message: '请至少选择一个服务', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      },
      brandData: [], // 商品品牌
      freightData: [] // 运费模板
    }
  },
  created () {
    this.isUpAndDown()
    this.menthodBrandData()
  },
  methods: {
    /**
     * 判断它是第一步的下一步做的回显
     * 还是第三步的上一步做的回显
     */
    isUpAndDown () {
      // console.log(this.$route.query.index)
      if (this.$route.query.index == 1) {
        this.getAddGoodsData()
      } else {
        this.previousData()
      }
    },
    // 回显商品品牌/运费模板
    async menthodBrandData () {
      const { data: res } = await this.$http.get('/goods/brand/list')
      this.brandData = res.data.list
      const { data: res2 } = await this.$http.get('/config/freightTemplate/list')
      this.freightData = res2.data.list
    },
    /**
     * 第一个页面传过来的参数
     */
    getAddGoodsData () {
      this.category3Ids = this.$route.query.category3Ids
      this.goodsInfo = JSON.parse(decodeURIComponent(this.$route.query.goodsInfo))
      this.showTbSpuData = JSON.parse(decodeURIComponent(this.$route.query.showSpuInfo))
    },
    previous () {
      const data = JSON.stringify(this.showTbSpuData)
      this.$router.push({
        path: '/goods/goods_edit',
        query: {
          category3Ids: this.category3Ids,
          showSpuInfo: encodeURIComponent(data),
          goodsInfo: encodeURIComponent(JSON.stringify(this.goodsInfo))
        }
      })
    },
    next () {
      if (this.goodsInfo.saleService.length < 1 || this.goodsInfo.name.length < 3 || this.goodsInfo.brandId.length < 1) {
        this.$message.warning('请输入必要信息')
        return
      }
      this.$router.push({
        path: '/goods/goodsProperty',
        query: {
          category3Ids: this.category3Ids,
          goodsInfo: encodeURIComponent(JSON.stringify(this.goodsInfo)),
          showTbSpuData: encodeURIComponent(JSON.stringify(this.showTbSpuData))
        }
      })
    },
    /**
     * 第三步的数据回显
     */
    previousData () {
      // 拿到上一步路由中携带的参数，回显数据
      this.category3Ids = this.$route.query.category3Ids // 转成json数据
      this.goodsInfo = JSON.parse(decodeURIComponent(this.$route.query.goodsInfo))
      this.showTbSpuData = JSON.parse(decodeURIComponent(this.$route.query.showTbSpuData))
    }
  }
}
</script>

<style scoped>

</style>
